@import'./variables';

//colors
@each $colorKey,
$color in $colors {
  .text-#{$colorKey} {
    color: $color
  }

  .bg-#{$colorKey} {
    background-color: $color;
  }
}

//text
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

@each $sizekey,
$size in $font-sizes {
  .fs-#{$sizekey} {
    font-size: $size;
  }
}

@each $key,
$value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

@each $key,
$value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

@each $typeKey,
$type in $spacing-types {

  @each $sizeKey,
  $size in $spacing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$type}: $size*$spacing-base-size;
    }
  }

  @each $sizeKey,
  $size in $spacing-sizes {
    .#{$typeKey}x-#{$sizeKey} {
      #{$type}-left: $size*$spacing-base-size;
      #{$type}-right: $size*$spacing-base-size;
    }

    .#{$typeKey}y-#{$sizeKey} {
      #{$type}-top: $size*$spacing-base-size;
      #{$type}-bottom: $size*$spacing-base-size;
    }
  }

  @each $directionKey,
  $direction in $spacing-directions {

    @each $sizeKey,
    $size in $spacing-sizes {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size*$spacing-base-size;
      }
    }
  }
}
